<template>
  <div id="tabview">
    <!-- 基本信息 -->
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
    <div class="blue_item" />
    <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">补充数据</span> 
    </div>
    <van-field :readonly='!canEdit' required name="demandPersonnel" v-model="fromdata.demandPersonnel" label="需求人员：" label-width="5em" :right-icon="canEdit?'arrow':''" placeholder="请填写需求人员" :rules="[{ required: true, message: '' }]"/>
    <van-field readonly required name="supportType" :value="fromdata.supportType" label="支撑类型：" label-width="5em"  placeholder="请选择" @click="canEdit?showOptionDialog('supportType'):''" :right-icon="canEdit?'arrow':''" :rules="[{ required: true, message: '' }]"/>
    <van-field readonly required name="supportWay" :value="fromdata.supportWay" label="支撑方式：" label-width="5em"  placeholder="请选择" @click="canEdit?showOptionDialog('supportWayType'):''" :right-icon="canEdit?'arrow':''" :rules="[{ required: true, message: '' }]"/>
    <van-field readonly required name="purchaseWay" :value="fromdata.purchaseWay" label="采购方式：" label-width="5em"  placeholder="请选择" @click="canEdit?showOptionDialog('purchaseWayType'):''" :right-icon="canEdit?'arrow':''" :rules="[{ required: true, message: '' }]"/>
    <div v-if="fromdata.supportType=='报名支撑'">
      <van-field :readonly='!canEdit' name="biddingBudget" v-model="fromdata.biddingBudget" label="招标预算(万元)：" label-width="8.5em" :right-icon="canEdit?'arrow':''"/>
      <van-field :readonly='!canEdit' name="purchasingPrice" v-model="fromdata.purchasingPrice" label="招标文件购买金额(元)：" label-width="11.5em" :right-icon="canEdit?'arrow':''"/>
      <van-field readonly name="cutTime" :value="fromdata.cutTime" label="截止报名时间：" label-width="7em"    placeholder="请选择" @click="canEdit?showDateDialogFun('cutTime'):''" :right-icon="canEdit?'arrow':''"/>
      <van-field readonly name="openingTime" :value="fromdata.openingTime" label="开标时间：" label-width="5em"    placeholder="请选择" @click="canEdit?showDateDialogFun('openingTime'):''" :right-icon="canEdit?'arrow':''"/>
      <van-field readonly name="tenderType" :value="fromdata.tenderType" label="投标方式：" label-width="5em"   placeholder="请选择" @click="canEdit?showOptionDialog('tenderType'):''" :right-icon="canEdit?'arrow':''"/>
    </div>
    <div v-if="fromdata.supportType=='投标支撑'">
      <van-field readonly name="tenderMain" :value="fromdata.tenderMain" label="投标主体：" label-width="5em"   placeholder="请选择" @click="canEdit?showOptionDialog('tenderMainType'):''" :right-icon="canEdit?'arrow':''"/>
      <van-field :readonly='!canEdit' name="partner" v-model="fromdata.partner" label="合作伙伴：" label-width="5em" :right-icon="canEdit?'arrow':''"/>
      <van-field :readonly='!canEdit' name="projectProfit" v-model="fromdata.projectProfit" label="项目利润率：" label-width="6em" :right-icon="canEdit?'arrow':''"/>
    </div>
    
    <van-field :readonly='!canEdit' required autosize type="textarea" rows="1" name="supportContent" v-model="fromdata.supportContent" label="支撑内容：" label-width="5em" :right-icon="canEdit?'arrow':''" placeholder="请填写支撑内容" :rules="[{ required: true, message: '' }]"/>
    <van-field readonly name="expectSupportTime" :value="fromdata.expectSupportTime" label="期望完成支撑时间：" label-width="9em"  placeholder="请选择" @click="canEdit?showDateDialogFun('expectSupportTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="taskAssTime" :value="fromdata.taskAssTime" label="任务分配时间：" label-width="7em"  placeholder="请选择" @click="canEdit?showDateDialogFun('taskAssTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="answerQueCollTime" :value="fromdata.answerQueCollTime" label="收集澄清问题完成时间：" label-width="11em" placeholder="请选择" @click="canEdit?showDateDialogFun('answerQueCollTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="bidFinTime" :value="fromdata.bidFinTime" label="标书编写完成时间：" label-width="9em"  placeholder="请选择" @click="canEdit?showDateDialogFun('bidFinTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="bidFstTriTime" :value="fromdata.bidFstTriTime" label="标书初审时间：" label-width="7em"  placeholder="请选择" @click="canEdit?showDateDialogFun('bidFstTriTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="bidReexTime" :value="fromdata.bidReexTime" label="标书复审时间：" label-width="7em"  placeholder="请选择" @click="canEdit?showDateDialogFun('bidReexTime'):''" :right-icon="canEdit?'arrow':''"/>
    <van-field readonly name="bidSubTime" :value="fromdata.bidSubTime" label="交标时间：" label-width="5em"  placeholder="请选择" @click="canEdit?showDateDialogFun('bidSubTime'):''" :right-icon="canEdit?'arrow':''"/>
    <div style="padding-bottom: 42px"></div>
    <van-popup v-model="showDateDialog" position="bottom" get-container="#app">
      <van-datetime-picker :formatter="formatter" type="datehour" v-model="nowDate" :min-date="strDate"
            :max-date="maxDate" @cancel="showDateDialog = false" @confirm="showDateDialogComfirm" />
    </van-popup>
    <van-popup v-model="showPopup" position="bottom" get-container="#app">
      <van-picker
        visible-item-count="6"
        show-toolbar
        :columns="typeColumns"
        @confirm="showConfirm"
        @cancel="showPopup = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { getDictList } from '@/api/dictapi'
import { mapGetters } from "vuex"
import moment from 'moment'
import { Notify, Toast } from "vant";
export default {
  data() {
    return {
      optionType:'',
      typeColumns:[],
      showPopup:false,
      showDateDialog:false,
      nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      strDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
      maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),
      showDateType:''
    }
  },
  computed: {
    // ...mapGetters(['user']),
  },
  props: ['canEdit','user','fromdata','showHistory','historydata','approveList','canEditbusinessName',],
  watch: {
    fromdata: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        console.log('changeFromdata list changed')
        this.$emit('freshData',this.fromdata)
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
  }, 
  created() {
    
  },
  activated(){

  },
  methods: {
    showOptionDialog(type){
      this.optionType=type
      getDictList(type, { userName: this.user.userName })
        .then((result) => {
          if (!result.data) {
              Notify(result.message);
              return;
          }
          this.typeColumns = [];
          for (var i = 0; i < result.data.data.length; i++) {
              this.typeColumns.push(result.data.data[i].name);
          }
          this.showPopup = true;
        })
    },
    showConfirm(value){
      if(this.optionType=='supportWayType'){
        this.fromdata.supportWay=value
      }else if(this.optionType=='purchaseWayType'){
        this.fromdata.purchaseWay=value
      }else if(this.optionType=='tenderMainType'){
        this.fromdata.tenderMain=value
      }else{
        this.fromdata[this.optionType]=value
      }
      this.showPopup=false
    },
    formatter(type, val) {
      if (type === 'year') {
          return `${val}年`;
      } else if (type === 'month') {
          return `${val}月`;
      } else if (type === 'day') {
          return `${val}日`;
      } else if (type === 'hour') {
          return `${val}时`;
      } else if (type === 'minute') {
          return `${val}分`;
      } 
      return val;
    },
    showDateDialogFun(value){
      this.showDateType=value
      this.showDateDialog=true
    },
    showDateDialogComfirm(value){
      this.fromdata[this.showDateType]=moment(value).format('YYYY-MM-DD HH:mm:ss');
      this.showDateDialog=false;
    }
  }
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>